<template>
  <div>
    <div class="titletopXX">
      <van-nav-bar
        size="30"
        :title="title"
        left-arrow
        :right-text="textXX"
        :fixed="true"
        @click-left="onClickLeft"
        @click-right="onClickright"
      />
    </div>
    <van-tabs v-model:active="active" color="#008c8c" @click="onClickTab">
      <van-tab title="在售中"></van-tab>
      <van-tab title="已下架"></van-tab>
    </van-tabs>
    <!-- <headerXX :name="title"></headerXX> -->
    <van-search
      v-model="XXyz.name"
      placeholder="请输入搜索关键词"
      @search="onRefresh"
      @clear="onRefresh"
    />
    <van-tree-select
      :main-active-index.sync="activeIndex"
      height="calc(var(--real-vh, 1vh) * 100 - 240px - env(safe-area-inset-bottom) - env(safe-area-inset-top))"
      :items="items"
      :active-id="activeId"
      @click-nav="onClickNav"
    >
      <template #content>
        <van-pull-refresh
          class="pull-refresh_Search"
          v-model="refreshing"
          @refresh="onRefresh"
        >
          <van-empty
            v-if="list.length == 0 && !error"
            image="search"
            description="未找到数据"
          />
          <van-empty v-if="error" image="error" description="网络错误" />
          <van-list
            :immediate-check="false"
            v-model:loading="loading"
            :finished="finished"
            :error.sync="error"
            error-text="请求失败，点击重新加载"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <!-- 列表内容 -->
            <div class="ullist">
              <div class="ul" v-for="(item, index) in list" :key="index">
                <div class="li">
                  <div class="li_img" @click="CPXQ(item)">
                    <van-image
                      class="img"
                      radius="4"
                      width="70"
                      height="70"
                      :src="item.image"
                      mode=""
                    >
                    </van-image>
                  </div>
                  <div class="li_text">
                    <div class="flex_title">
                      <div
                        class="title WZ_size_14 textCC1"
                        style="font-weight: 700"
                      >
                        {{ item.name }}
                      </div>
                      <div class="text WZ_size_10" v-if="item.day == 1">
                        早 餐
                      </div>
                      <div class="text WZ_size_10" v-else>正 餐</div>
                    </div>

                    <div class="text_JJ WZ_size_10 example1 textCC1">
                      {{ item.description }}
                    </div>

                    <div class="li_D" v-if="XXyz.deleteFlag == 'N'">
                      <div class="Price WZ_size_12" style="color: #ff9900">
                        {{ item.price }}元
                      </div>
                      <div
                        class="BJXXbtn WZ_size_12"
                        @click.stop="itemClick(item)"
                        v-if="textXX == ''"
                      >
                        下 架
                      </div>
                      <van-checkbox
                        v-else
                        v-model="item.checked"
                        @click.stop="GXXX"
                      ></van-checkbox>
                    </div>
                    <div class="li_D" v-if="XXyz.deleteFlag == 'X'">
                      <div class="Price WZ_size_12" style="color: #ff9900">
                        {{ item.price }}元
                      </div>
                      <div
                        class="BJXXbtn WZ_size_12"
                        @click.stop="itemClick2(item)"
                        v-if="textXX == ''"
                      >
                        上 架
                      </div>
                      <div
                        class="BJXXbtn WZ_size_12"
                        @click.stop="DELxx(item)"
                        v-if="textXX == ''"
                        style="margin-left: 5px; background: #fa3534"
                      >
                        删 除
                      </div>
                      <van-checkbox
                        v-else
                        v-model="item.checked"
                        @click.stop="GXXX"
                      ></van-checkbox>
                    </div>
                  </div>
                </div>
                <van-divider
                  :style="{
                    borderColor: '#999',
                    margin: '5px 0',
                  }"
                >
                </van-divider>
              </div>
            </div>
            <template #error>
              <div class="error-tip" @click="retryLoad">
                <van-icon name="warning" />
                <span>加载失败，点击重试</span>
              </div>
            </template>
          </van-list>
        </van-pull-refresh>
      </template>
    </van-tree-select>
    <div class="DI" style="position: fixed; bottom: 0">
      <van-button
        v-if="textXX == ''"
        style="width: 46%; margin-bottom: 20px"
        @click="PLSZbtn()"
        >{{ active == 0 ? "批量下架" : "批量上架" }}
      </van-button>
      <van-button v-else style="width: 46%; margin-bottom: 20px" @click="QX"
        >取 消</van-button
      >
      <van-button
        v-if="textXX == '' && active == 0"
        style="width: 46%; margin-bottom: 20px; margin-left: 20px"
        class="buy"
        color="#36C2A8"
        @click="jumpToBuy()"
        >新增上架</van-button
      >
      <van-button
        v-if="ids != '' && active == 0 && textXX != ''"
        style="width: 46%; margin-bottom: 20px; margin-left: 20px"
        class="buy"
        color="red"
        @click="delXX('X')"
        >下 架</van-button
      >
      <van-button
        v-if="ids != '' && active == 1 && textXX != ''"
        style="width: 46%; margin-bottom: 20px; margin-left: 20px"
        class="buy"
        color="#36C2A8"
        @click="delXX('N')"
        >上 架</van-button
      >
    </div>
    <van-dialog v-model:show="show" title="菜品详情">
      <div class="CPXQCalss">
        <div class="CPXQli">
          <van-image
            radius="10px"
            width="120px"
            height="120px"
            :src="itemCP.image"
          />
          <div class="WZ_size_18">{{ itemCP.name }}</div>
          <div class="WZ_size_16 paddingSX10" style="color: rgb(128, 128, 128)">
            {{ itemCP.description }}
          </div>
          <div class="WZ_size_20" style="color: rgb(255, 141, 26)">
            ¥ {{ itemCP.price }}
          </div>
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import headerXX from "../../../../../components/title.vue";
import {
  queryMealDishBackList,
  deleteMealToDishBack,
  deleteMealDishBack,
  deleteMealDishTrueBack,
} from "@/api/realAssets/icsharedstation/CPXX/index.js";
import { Toast, Dialog, Notify } from "vant";
export default {
  data() {
    return {
      activeId: 0,
      title: "单位简介",
      show: false,
      title: "菜谱管理",
      imgshow: false,
      siteData: JSON.parse(localStorage.getItem("siteData")),
      arrayString: {},
      textXX: "",
      active: 0,
      items: [
        {
          text: "星期一",
          id: "1",
          type: "2",
        },
        {
          text: "星期二",
          id: "2",
          type: "2",
        },
        {
          text: "星期三",
          id: "3",
          type: "2",
        },
        {
          text: "星期四",
          id: "4",
          type: "2",
        },
        {
          text: "星期五",
          id: "5",
          type: "2",
        },
      ],
      id: 0,
      activeIndex: 0,
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      error: false, // 控制错误状态
      SPxx: {},
      ZJG: 0.0,
      QXflag: false,
      itemCP: {},
      ids: "",
      XXyz: {
        siteId: JSON.parse(localStorage.getItem("siteData")).id,
        type: "2",
        categoryId: "1",
        pageNumber: 1,
        pageSize: 10,
        deleteFlag: "N",
        name: "",
      },
    };
  },
  created() {},
  mounted() {
    this.onLoad();
  },
  methods: {
    valChange(e) {
      this.ZJG = 0;
      this.list[this.activeIndex].forEach((item) => {
        if (item.goodId == e.goodId) {
          item.goodQty = e.goodQty;
          item.goodCountPrice = item.goodQty * item.goodPrice;
        }
      });
      this.list.forEach((item) => {
        item.forEach((itemm) => {
          this.ZJG += itemm.goodCountPrice;
        });
      });
    },
    //获取右边列表
    onLoad() {
      this.loading = true;
      if (this.error) return; // 如果当前是错误状态，不自动触发加载
      if (this.refreshing) {
        this.list = [];
      }
      queryMealDishBackList(this.XXyz).then((res) => {
        if (res.resultMessage != "SUCCESS") {
          this.list = [];
          this.error = true; // 显示错误提示
          // loading.value = false;
        } else if (res.data.length == 0) {
          this.list = [];
          this.finished = true;
        } else {
          // 使用 for 循环添加字段
          for (let i = 0; i < res.data.length; i++) {
            res.data[i].checked = false;
          }

          this.list = [...this.list, ...res.data];
        }
        this.loading = false;
        // 判断是否已加载完所有数据
        if (this.list.length == res.pageNum) {
          this.finished = true;
        } else {
          this.XXyz.pageNumber++;
        }
        this.refreshing = false;
      });
    },
    // 点击重试
    retryLoad() {
      this.XXyz.pageNumber = 1;
      this.XXyz.pageSize = 10;
      this.finished = false;
      this.error = false;
      this.loading = true;
      this.refreshing = true;
      this.onLoad();
    },
    // 下拉刷新
    onRefresh() {
      this.XXyz.pageNumber = 1;
      this.XXyz.pageSize = 10;
      this.finished = false;
      this.error = false;
      this.loading = true;
      this.refreshing = true;
      this.onLoad();
    },
    //点击新增
    jumpToBuy() {
      //跳转到新增
      this.$router.push({
        name: "rvicsharedstation-HT_ZGST_MZCP_CPlist",
      });
    },
    // 切换左侧分类
    onClickNav(index) {
      this.ids = "";
      this.XXyz.categoryId = this.items[index].id;
      this.XXyz.type = this.items[index].type;

      this.onRefresh();
    },
    //点击下架
    itemClick(item) {
      Dialog.confirm({
        title: "是否下架",
        message: `正在下架菜品【${item.name}】`,
      })
        .then(() => {
          let obj = {
            deleteFlag: "X",
            ids: item.id + "",
          };
          console.log(obj);
          deleteMealDishBack(obj).then((res) => {
            if (res.resultCode == 1) {
              Notify({ type: "success", message: res.data });
              this.onRefresh();
            } else {
              Notify({ type: "warning", message: "下架失败" });
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    //点击上架
    itemClick2(item) {
      Dialog.confirm({
        title: "是否上架",
        message: `正在上架菜品【${item.name}】`,
      })
        .then(() => {
          let obj = {
            deleteFlag: "N",
            ids: item.id + "",
          };
          console.log(obj);
          deleteMealDishBack(obj).then((res) => {
            if (res.resultCode == 1) {
              Notify({ type: "success", message: res.data });
              this.onRefresh();
            } else {
              Notify({ type: "warning", message: "上架失败" });
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    //点击删除
    DELxx(item) {
      Dialog.confirm({
        title: "是否删除",
        message: `正在删除下架菜品【${item.name}】`,
      })
        .then(() => {
          let obj = {
            ids: item.id + "",
          };
          deleteMealDishTrueBack(obj).then((res) => {
            if (res.resultCode == 1) {
              Notify({ type: "success", message: res.data });
              this.onRefresh();
            } else {
              Notify({ type: "warning", message: "删除失败" });
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    //批量删除
    PLSZbtn() {
      this.ids = "";
      this.list.forEach((item) => {
        item.checked = false;
      });
      this.textXX = "全选";
    },
    QX() {
      this.textXX = "";
      this.ids = "";
    },
    //删除
    delXX(val) {
      if (this.ids == "") {
        Notify({ type: "warning", message: "请先勾选菜品" });
        return;
      }
      let XX = "";
      if (val == "N") {
        XX = "上架";
      } else {
        XX = "下架";
      }
      Dialog.confirm({
        title: "是否" + XX,
        message: "目前已勾选的餐品正准备" + XX,
      })
        .then(() => {
          deleteMealDishBack({
            deleteFlag: val,
            ids: this.ids,
          }).then((res) => {
            if (res.resultCode == 1) {
              Notify({ type: "success", message: res.data });
              this.onRefresh();
            } else {
              Notify({ type: "warning", message: "下架失败" });
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    GXXX(val) {
      this.ids = "";
      let GXlist = [];
      this.list.forEach((item) => {
        if (item.checked) {
          this.ids = this.ids + item.id + ",";
          GXlist.push(item);
        }
      });
      if (GXlist.length == this.list.length) {
        this.textXX = "取消全选";
        this.QXflag = true;
      } else {
        this.textXX = "全选";
        this.QXflag = false;
      }
    },
    //全选
    onClickright() {
      this.ids = "";
      this.QXflag = !this.QXflag;
      if (!this.QXflag) {
        this.textXX = "全选";
      } else {
        this.textXX = "取消全选";
      }
      if (this.QXflag) {
        this.list.forEach((item) => {
          item.checked = true;
          if (item.checked) {
            this.ids = this.ids + item.id + ",";
          }
        });
      } else {
        this.list.forEach((item) => {
          item.checked = false;
        });
      }
    },
    onClickTab(val) {
      this.textXX = "";
      if (this.active == 0) {
        this.XXyz.deleteFlag = "N";
      } else {
        this.XXyz.deleteFlag = "X";
      }
      this.onRefresh();
    },
    CPXQ(val) {
      this.show = true;
      this.itemCP = val;
    },
    onClickLeft() {
      this.$router.push({
        name: "rvicsharedstation-HT_ZGST_indexbrn",
      });
    },
  },
};
</script>
<style>
.van-sidebar-item--select:before {
  background-color: rgb(2, 117, 113) !important;
}
</style>
<style lang="less" scoped>
@import "../../../../../static/css/index.less";
@import "../../../../../static/css/GYcSS.less";
.titletopXX {
  height: 45px;
}
.pull-refresh {
  background: #fff;
}
.pull-refresh_Search {
  height: calc(
    var(--real-vh, 1vh) * 100 - 220px - env(safe-area-inset-bottom) -
      env(safe-area-inset-top)
  );
}
.BJXXbtn {
  width: 50px;
  height: 25px;
  line-height: 25px;
  background: #008c8c;
  color: #fff;
  text-align: center;
  border-radius: 5px;
}
.flex_title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .title {
    width: calc(100% - 45px);
  }
  .text {
    border: 1px solid #999;
    width: 40px;
    padding: 3px 0;
    text-align: center;
    border-radius: 10px;
  }
}
.DI {
  padding-top: 10px;
}
// .ullist {
//   padding-bottom: 100px;
// }
.error-tip {
  padding: 16px;
  color: #f56c6c;
  text-align: center;
}
.error-tip .van-icon {
  margin-right: 4px;
  vertical-align: middle;
}
.stepper {
  --van-stepper-background-color: #36c2a8;
  --van-stepper-button-icon-color: #36c2a8;
  --van-stepper-button-disabled-color: #36c2a8;
  --van-stepper-button-disabled-icon-color: #36c2a8;
  --van-stepper-button-round-theme-color: #36c2a8;
  --van-stepper-input-disabled-text-color: #36c2a8;
  --van-stepper-input-disabled-background-color: #36c2a8;
}
.CPXQCalss {
  position: relative;
  text-align: center;
  // margin: 20px 0;
  padding: 20px;
  box-sizing: border-box;
  word-wrap: break-word; /* 允许长单词或URL地址内部换行 */
  // .CPXQli {
  //   position: absolute;
  //   left: 50%;
  //   top: 50%;
  //   transform: translate(-50%, -50%);
  // }
}
</style>